<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>


    <!-- 引入bootstrap的css -->
    <link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap.css"></link>
    <link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap.css.map"></link>
    <!-- 引入jquery的js  -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <!-- 引入bootstrap的js -->
    <script type="text/javascript" src="../js/bootstrap/bootstrap3/js/bootstrap.js"></script>
    <!-- 引入boostrap的表格的css、js -->
    <link rel="stylesheet" href="../js/bootstrap/bootstrap-table/bootstrap-table.css"></link>
    <script type="text/javascript" src="../js/bootstrap/bootstrap-table/bootstrap-table.js"></script>
    <script type="text/javascript" src="../js/bootstrap/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <!-- 引入bootbox弹框的js -->
    <script type="text/javascript" src="../js/bootstrap/bootstrap-bootbox/bootbox.js"></script>
    <!-- 引入bootbox时间 的css -->
    <link rel="stylesheet" href="/js/bootstrap/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css"></link>
    <!-- 引入bootbox时间 的js -->
    <script type="text/javascript" src="/js/bootstrap/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="/js/bootstrap/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <!-- 引入bootbox上传图片 的css -->
    <link rel="stylesheet" href="../js/bootstrap/bootstrap-fileinput/css/fileinput.css"></link>
    <!-- 引入bootbox上传图片 的js -->
    <script type="text/javascript" src="../js/bootstrap/bootstrap-fileinput/js/fileinput.js"></script>
    <script type="text/javascript" src="../js/bootstrap/bootstrap-fileinput/js/locales/zh.js"></script>
    <!-- 引入bootbox开关 按钮 的css -->
    <link rel="stylesheet" href="../js/bootstrap/bootstrap-switch-master/css/bootstrap3/bootstrap-switch.css"></link>


<style>
    .steps {
        position: relative;
        margin-bottom:30px;
        counter-reset: step;
        background:#fff;
        margin :5px;
        overflow: hidden;
        margin-left: -46px;
    }

    /* 步骤描述 */
    .steps li {
        list-style-type: none;
        font-size: 20px;
        color: #0b0b0b;
        text-align: center;
        width: 20%;
        position: relative;
        float: left;
        height:40px;
        line-height :40px;
        padding :10px 0;
    }
    /* 步骤数字 */
    .steps li:before {
        display: block;
        content: counter(step); /* 设定计数器内容 */
        counter-increment: step; /* 计数器值递增 */
        width: 10px;
        height: 10px;
        background-color:#ccc;
        line-height: 10px;
        border-radius: 10px;
        font-size: 0px;
        color: #fff;
        text-align: center;
        font-weight: 600;
        margin: 0 auto 9px auto;
    }

    /* 连接线 */
    .steps li ~ li:after {
        content: '';
        width: 100%;
        height: 3px;
        background-color:#ccc;
        position: absolute;
        left: -48%;
        top: 14px;
        z-index: 0;
    }
    /* 将当前/完成步骤之前的数字及连接线变绿 */
    .steps li.active:before, .steps li.active:after {
        background-color:forestgreen;
    }

</style>

<body style="width: 600px; position:absolute; left: 500px;top: 100px; " background="\img\x.jpg;">
<div>
    <ul class="steps" style="background-color: rgba(0,0,0,0);">
        <li id="s1"  class="active">申请完成</li>
        <li id="s2">资料上传</li>
        <li id="s3" >专员审核</li>
    </ul>

    <span ><h2 id="total" style="margin-left: 125px ;color: #BDEBEE" >验证手机号</h2></span>

    <div id="verify">

            <div class="form-group">
                <div class="row">
                    <div class="col-md-2"><label><h4 style="color: #BDEBEE">手机号</h4></label></div>
                    <div class="col-md-6"><input style="font-size:  16px" class="form-control" id="phone"  ></div>
                </div>
            </div>
            <div class="form-group">
                <div class="row">
                    <div class="col-md-2"><label><h4  style="color: #BDEBEE">验证码</h4></label></div>
                    <div class="col-md-3"><input style="font-size: 16px" id="code" class="form-control"  name="uname" ></div>

                    <div class="col-md-1"><button id="anew" onclick="sendCode()" class="btn btn-primary " type="button">获取验证码</button></div>
                </div>
            </div>



        <div class="form-group">
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-6"><button style="width: 200px" onclick="quickLogin()" class="btn btn-primary " type="button">下一步</button></div>
            </div>
        </div>
    </div>

    <div id="updatePwd" style="display: none">

        <div class="form-group">
            <div class="row">
                <div class="col-md-2"><label><h4 style="color: #BDEBEE">设置密码</h4></label></div>
                <div class="col-md-6"><input style="font-size:  16px" class="form-control" id="pwd1"  ></div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                <div class="col-md-2"><label><h4 style="color: #BDEBEE">确认密码</h4></label></div>
                <div class="col-md-6"><input style="font-size:  16px" class="form-control" id="pwd2"  ></div>
            </div>
        </div>

        <div class="form-group" >
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-6"><button style="width: 200px" onclick="upPwd()" class="btn btn-primary " type="button">确认修改</button></div>
            </div>
        </div>
    </div>

    <div id="data" style="display: none">


        <a href="../page/login"  style="color: #BDEBEE">返回登录</a>
    </div>


</div>
<input type="hidden" readonly id="ssss">


</form>

</body>

<script>


    //定时器
  counttime=60;//总秒钟

    function timing(){
        if(counttime>=0){
            $("#anew").html(counttime+"s后重新获取");


            counttime--;
            var tt =  window.setTimeout("timing()",1000);
        }else{
            window.clearTimeout(tt);
            $("#anew").html("获取验证码");
            $("#anew").prop("disabled",false);
            counttime=60;

        }


    }

    //发送验证码
    function sendCode(){

        var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        if (!reg_tel.test($("#phone").val())) {
            alert("请正确填写您的手机号码！");

            return ;
        }


        $.ajax({
            url:"../user/sendCode",
            type:"get",
            data:{phone:$("#phone").val(),typ: "updatePwd"},
            success:function (data) {
                alert(data);
                if(data=="验证码发送成功！"){

               $("#anew").prop("disabled",true);
                    timing();

                }


           }
        })
    }


    //验证验证码
    function quickLogin(){
        var sddd=$("#phone").val();

        $("#ssss").val(sddd)
        $.ajax({
            url:"../user/quickLogin",
            type:"get",
            data:{phone:$("#phone").val(),code:$("#code").val() ,typ: "updatePwd"},
            success:function (data) {
                alert(data)
                if(data=='登陆成功!!'){
                    $("#verify").hide();
                    $("#updatePwd").show();
                    $("#s2").prop("class","active");
                    $("#verify").html("修改密码");
                }
            }
        })
    }

    //修改密码
    function upPwd(){
        if($("#pwd1").val()!=$("#pwd2").val()){
            alert("密码两次输入不一致请确认后输入！！！");
            return;
        }


        $.ajax({

            url:"../user/upPwd",
            type:"post",
            data:{phone:  $("#ssss").val(),userPwd:$("#pwd1").val()},
            success:function (data) {
               alert(data);
                $("#updatePwd").hide();
                $("#data").show();
                $("#s3").prop("class","active");
                $("#verify").html("密码修改成功");
            }
        })
    }
</script>
</html>